<template>
  <div >
    <div v-if="type !== 'view'">
      <div v-if="!selection">
        <el-button
          v-if="name + preparedData === ''"
          class="ft-button"
          :disabled="disabled"
          size="small"
          @click="visible = true">{{ placeholder }}</el-button>
        <el-button
          v-else
          class="ft-button center"
          :disabled="disabled"
          size="small"
          @click="visible = true">{{ name|| preparedData }}</el-button>
      </div>
      <div v-else>
        <el-button
          v-if="seleArr.length + preparedData.length === 0"
          class="ft-button"
          :disabled="disabled"
          size="small"
          @click="visible = true">{{ placeholder }}</el-button>
        <el-button
          v-else
          class="ft-button center"
          :disabled="disabled"
          size="small"
          @click="visible = true">
          <template v-for="(item,index) in seleArr">
            {{ item.name }}{{ index === seleArr.length-1 ? '' : ',' }}
          </template>
        </el-button>
      </div>
    </div>
    <div v-else>
      <span class="span" v-if="selection">
        <template v-for="(item,index) in preparedData">
          {{ item.name }}{{ index === preparedData.length-1 ? '' : ',' }}
        </template>
      </span>
      <span class="span" v-else>{{ name || preparedData }}</span>
    </div>
    <el-dialog
      width="40%"
      title="双击行选择项"
      :visible.sync="visible"
      append-to-body
      :close-on-click-modal="fasle"
      class="ft"
      @open="crudShow=true"
      @closed="crudShow=false"
    >
      <avue-crud
        v-if="crudShow"
        ref="crud"
        :option="option"
        :search.sync="form"
        :page.sync="page"
        :table-loading="listLoading"
        :data="data"
        @search-change="searchChange"
        @on-load="onLoad"
        @row-dblclick="rowDbclick"
        @selection-change="selectionChange"
      >
      </avue-crud>
      <span slot="footer" class="dialog-footer" v-if="this.selection">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

export default {
  props: {
    selection: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
    },
    // 当前select加载数据的接口方法
    getList: {
      type: Function,
      default: () => {},
    },
    // 用于回显的数据
    preparedData: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      // 请求参数中，增加筛选逻辑：启动状态
      default: () => { return {} },
    },
    labelPath: {
      type: String,
      default: 'name',
    },
    labelPathName: {
      type: String,
      default: '',
    },
    value: {
      default: () => []
    },
    valuePath: {
      type: String,
      default: 'id',
    },
    // 用户输入数据作为查询参数的字段名
    disabled: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
    },
    // 通过ID找详情
    getItem: {
      type: String,
    },
  },
  data () {
    return {
      listLoading: true,
      crudShow: false,
      page: {
        total: 10,
        currentPage: 1,
        pageSize: 10,
      },
      form: {},
      visible: false,
      name: '',
      data: [],
      seleArr: [],
      option: {
        header: false,
        menu: false,
        selection: this.selection,
        emptyBtn: false,
        searchMenuSpan: 4,
        column: [
          {
            label: this.labelPathName,
            prop: this.labelPath,
            searchPlaceholder: `请输入${this.labelPathName}`,
            search: true,
            searchSpan: 20,
          }
        ]
      },

    }
  },
  watch: {
    getItem: {
      deep: true,
      handler (val) {
        const pms = {}
        pms[this.valuePath] = val
        this.getList(this.page.currentPage, this.page.pageSize, pms).then(res => {
          const data = res.data.data.records
          this.rowDbclick(data[0])
        })
      }
    },
    preparedData: {
      deep: true,
      handler (val) {
        this.seleArr = val
      }
    },
  },
  mounted () {
  },
  methods: {
    selectionChange (selection) {
      this.$emit('change', selection)
      this.$emit('input', selection)
      this.seleArr = selection
    },
    rowDbclick (row) {
      if (!this.selection) {
        this.name = row[this.labelPath]
        console.log(row, row[this.labelPath], this.labelPath)
        this.$emit('change', row.id, row)
        this.$emit('input', row.id)
        this.visible = false
      }
    },
    empty () {
      console.log(123123123)
      this.name = ''
      this.$emit('input', '')
    },
    searchChange (form, done) {
      this.onLoad()
      done()
    },
    onLoad () {
      this.listLoading = true
      this.getList(this.page.currentPage, this.page.pageSize, { ...this.params, ...this.form }).then(res => {
        this.data = res.data.data.records
        this.page.total = res.data.data.total
        this.listLoading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.name{
  margin-left: 3px;
  color: #606266;
  font-size: 13px;
}
.span{
  color: #606266 !important;
  font-size: 13px;
}
.ft-button{
  height: 32px;
  line-height: 32px;
  padding: 0px 15px;
  text-align: left;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: #fff;
  color: #c2c6cd;
  border: 1px solid #DCDFE6;
  &:hover{
    background: #fff;
    border: 1px solid #DCDFE6;
    color: #c2c6cd;
    border-color: #C0C4CC;
  }
}
.el-input__inner:hover{
   border-color: #F56C6C;
}
.center{
  color: #606266;
  font-weight: normal;
  &:hover{
    background: #fff;
    border: 1px solid #DCDFE6;
    color: #606266;
    border-color: #C0C4CC;
  }
}
.ft{
  /deep/.avue-form__group--flex{
    .el-col{
      .el-form-item{
        display: flex;
        justify-content: space-between;
        .el-form-item__label{
          width:auto !important;
          white-space: nowrap;
        }
        .el-form-item__content{
          width: 100%;
          margin-left:unset !important;
        }
      }
    }
  }
  /deep/.el-dialog__footer{
    text-align: center;
  }
}
</style>